<template>
	<view class="details">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">商品详情</block>
		</cu-custom>
		<view class="details-top">
<!-- 			<view class="nav-bar">
				<text class="cuIcon-roundleftfill-copy" @tap="goBack()"></text>
			</view> -->
			<view class="products-img">
				<image v-if="details.thumb" :src='details.thumb||"../../static/product-bg.png"' mode="aspectFit"></image>
			</view>
		</view>
		<view class="details-introduction">
			<view class="details-name">
				{{details.name}}
			</view>
			<view class="details-btn">
				<navigator class="goStroe">付加加积分商城 <text class="cuIcon-right"></text></navigator>
				<!-- <text class="cuIcon-like"></text> -->
			</view>
		</view>
		<view class="details-choose">
<!-- 			<view class="choose-label choose-able">
				<text class="choose-tips">已选</text>
				<text class="choose-on">螺旋胶原蛋白 全身护理</text>
				<text class="right-icon">></text>
			</view> -->
			<view class="choose-label choose-able" >
				<text class="choose-tips">配送</text>
				<text class="choose-on" v-if="status==1" @tap="chooseAdd()">{{choseCity}}</text>
				<text class="choose-on" v-if="status==0">您尚未设置收货地址</text>
				<text class="right-icon">></text>
			</view>
		</view>
		<view class="details-img-list">
			<view class="list-title">产品介绍图片</view>
			<!-- <rich-text class="uni-common-mt" :nodes="details.details"></rich-text> -->
			<view class="list-show" v-html="changeImg">
				<!-- <view class="list-item">
					<image src="../../static/details-01.png"></image>
				</view> -->
			</view>
		</view>
		<view class="product-tips">
			<text class="tips-item"><text class="cuIcon-roundcheck"></text>正品保障</text>
			<text class="tips-item"><text class="cuIcon-roundcheck"></text>提供售后</text>
			<text class="tips-item"><text class="cuIcon-roundcheck"></text>72小时发货</text>
			<text class="tips-item"><text class="cuIcon-roundcheck"></text>不接受无理由退款</text>
		</view>
		<view class="exchange">
			<view class="details-price">
				<!-- <image src="../../static/details-price.png"></image> -->
				<view class="cuIcon-present"></view>
				<text class="price-num">{{details.money}}</text>
				<text>积分</text>
			</view>
			<view class="exchange-btn">
				<!-- <view></view> -->
				<view class="toBack" @tap="goBack()">返回首页</view>
				<view class="action" @tap="goConfirm()">立即兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
	import shops from '@/api/shop';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				choseCity: '北京市 北京市',
				addressList: [],
				details:{},
				indexs:0,
				content:'',
				chooseStatus:0,
				addRecord:[],
				status:0
			}
		},
		computed: {
			...mapState(['config', 'hasLogin', 'userInfo','imgHost']),
			changeImg(){
				this.content = this.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
				return this.content;
			}
			// html.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			renderHtml() {
			    this.setData({
			      renderedByHtml: true
			    })
			},

			// products(items){
				
			// },
			goConfirm() {
				// if(!this.details){
				// 	this.toast('网络错误!');
				// 	return false;
				// }
				console.log(this.details);
				var usrData = this.details.pid;
				if(this.chooseStatus!=0){
					usrData +=  '&a_id=' + this.addRecord[this.indexs].id;
				}
				console.log(usrData);
				uni.navigateTo({
				    url: 'confirm?pid=' + usrData
				});
			},
			chooseAdd() {
				var _this = this;
				uni.showActionSheet({
					itemList: _this.addressList,
					success: function(res) {
						console.log(res);
						_this.choseCity = _this.addressList[res.tapIndex];
						_this.indexs =  res.tapIndex;
						_this.chooseStatus =  1;
						// console.log('di='+_this.addRecord[_this.indexs].id);
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			async getAddress() {
				let res = await shops.addressList({
					limit: 5,
					page: 1,
				});
				if (res.data.length <= 0) {
					this.more = 'noMore';
				} else {
					this.more = 'more';
				}
				if (res.code == 1) {
					this.status = 1;
					this.addRecord = res.data;
					if(res.data.length<1){
						this.status = false;
						return false;
					}
					for (let i=0;i<5;i++)
					{ 
						if(res.data[i]){
							this.addressList.push(res.data[i]['province'] + ' ' + res.data[i]['city']);
						}
					}
				} else {
					console.log(res.msg);
				}
				console.log(this.addressList);
			},
			async getDetails(pid) {
				let res = await shops.productDetails({
					pid: pid
				})
				if (res.code == 1) {
					this.details = res.data;
					this.content = res.data.details;
				}
			}
		},
		onLoad: function(option) { 
			this.getDetails(option.pid);
			this.getAddress();
		}
	}
</script>

<style lang="less">
	.details {
		background: rgb(242, 242, 242);
		padding-bottom: 160rpx;
		font-family: "Noto Sans SC";

		// height: 100vh;
		.details-top {
			height: 510rpx;
			position: relative;
			top: 0;
			left: 0;
			z-index: 10;
			.nav-bar {
				height: 60rpx;
				padding: 0 30rpx;
				position: fixed;
				top: 50rpx;
				left: 0;
				z-index: 11;
				text {
					font-size: 60rpx;
					color: #564649;
				}
			}

			.products-img {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}
		
		.details-introduction {
			height: 150rpx;
			background-color: #ffffff;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;

			.details-name {
				height: 90rpx;
				font-family: "Noto Sans SC";
				font-size: 28rpx;
				color: #333333;
				font-weight: 600;
			}
			.imgChange{
				max-width:100%!important;
				height:auto;
			}
			.details-btn {
				height: 25rpx;
				font-family: "Noto Sans SC";
				font-size: 25rpx;

				.goStroe {
					display: inline-block;
					text{
						padding-left: 15rpx;
					}
				}
				.cuIcon-like {
					width: 50rpx;
					float: right;
					font-size: 40rpx;
					margin-top: -20rpx;
				}
			}
		}

		.details-choose {
			.choose-label {
				padding: 0 20rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				height: 80rpx;
				line-height: 80rpx;
				font-family: "SimHei";
				font-size: 28rpx;
				color: #333333;

				.choose-tips {
					width: 110rpx;
					display: inline-block;
					color: #808080;
				}

				.choose-on {
					width: 535rpx;
					font-weight: 500;
					display: inline-block;
				}
			}

			.choose-able {
				position: relative;

				.right-icon {
					position: absolute;
					top: 0;
					right: 30rpx;
				}
			}
		}

		.details-img-list {
			background-color: #FFFFFF;
			padding: 0 25rpx;

			.list-title {
				font-family: 'SimHei';
				height: 60rpx;
				line-height: 60rpx;
				color: #000000;
				font-size: 25rpx;
			}

			.list-show {
				// display: flex;
				// justify-content: space-between;
				.list-item {
					width: 325rpx;
					height: 325rpx;
					display: inline-block;
					background-color: rgb(242, 242, 242);
					margin: 14rpx;
					border-radius: 10rpx;
				}
			}
			img{
				margin-top: 27.5rpx;
				margin-left: 27.5rpx;
				width: 270rpx!important;
				height: 270rpx!important;
				max-width: 100%;
			}
			.list-item::v-deep img{
			    width:100%;
			}
		}

		.product-tips {
			height: 75rpx;
			padding: 0 30rpx;
			line-height: 75rpx;
			color: #333333;
			font-size: 22rpx;
			font-family: 'SimHei';
			display: flex;
			justify-content: space-between;
			.tips-item {
				margin-left: 20rpx;
				display: inline-block;
				position: relative;
				text{
					color: #f23a3a;
				}
			}
			// .tips-item:before {
			// 	content: '';
			// 	position: absolute;
			// 	top: 22rpx;
			// 	left: -33rpx;
			// 	width: 30rpx;
			// 	height: 30rpx;
			// 	background: url(../../static/tips-item.png) no-repeat center;
			// 	background-size: 30rpx 30rpx;
			// }
		}

		.exchange {
			background-color: #FFFFFF;
			width: 100vw;
			height: 150rpx;
			padding: 0 30rpx;
			line-height: 150rpx;
			position: fixed;
			z-index: 1;
			bottom: 0;
			left: 0;

			.details-price {
				width: 280rpx;
				height: 150rpx;
				display: inline-block;
				
				.price-num {
					color: #f51313;
					padding-left: 25rpx;
					font-size: 52.72rpx;
					padding-right: 10rpx;
				}
				.cuIcon-present {
					display: inline;
					font-size: 50rpx;
					color: #000000;
				}
				text {
					font-family: 'SimHei';
					font-size: 24rpx;
					color: #6a6a69;
				}
				
			}

			.exchange-btn {
				width: 320rpx;
				height: 150rpx;
				line-height: 150rpx;
				float: right;

				view {
					width: 160rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					display: inline-block;
					font-size: 30rpx;
					color: #ffffff;
				}

				.toBack {
					background-color: rgb(50, 51, 51);
					border-radius: 30rpx 0 0 30rpx;
				}

				.action {
					background-color: rgb(254, 63, 18);
					border-radius: 0 30rpx 30rpx 0;
				}
			}
		}
	}
</style>
